<template>
  <el-dialog v-model="store.state.filit.dialogFormVisible" title="Shipping address">
    <el-form :model="store.state.filit.listdata" :label-width="formLabelWidth">
      <el-form-item label="电影名" prop="film">
        <el-input v-model="store.state.filit.listdata.film" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电影封面" prop="film">
        <el-input v-model="store.state.filit.listdata.tp" autocomplete="off" />
      </el-form-item>
      <el-form-item label="详情" :label-width="formLabelWidth">
        <el-input v-model="store.state.filit.listdata.txt" autocomplete="off" />
      </el-form-item>
      <el-form-item label="导演" :label-width="formLabelWidth">
        <el-input v-model="store.state.filit.listdata.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-input v-model="store.state.filit.listdata.prices" autocomplete="off" />
      </el-form-item>
      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-input v-model="store.state.filit.listdata.time" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelsubmit">取消</el-button>
        <el-button type="primary" @click="toggleDialog">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { defineEmits, reactive, ref } from 'vue';

import { useStore } from 'vuex';
import http from '../util/api';

const store = useStore();
const formLabelWidth = '140px';

const emit = defineEmits(['getlist']);
// 确定
const toggleDialog = () => {
  http(`/movie/${store.state.filit.listdata.id}`, 'put', store.state.filit.listdata).then((res: any) => {
    if (res.status === 200) {
      ElMessage({
        type: 'success',
        message: '修改成功！',
      });
      console.log(res);

      emit('getlist');
    } else {
      ElMessage({
        type: 'error',
        message: '修改失败！',
      });
    }
    store.commit('SET_DIALOG');
  });
};
// 取消
const handelsubmit = () => {
  store.commit('SET_DIALOG');
  ElMessage({
    type: 'info',
    message: '已取消！',
  });
};

</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

/* .el-input {
       width: 300px;
     } */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
